<template>
	<view class="page">
		<template v-if ="current == 1 || current == 2 || current == 3">
			<view class="apply-top">
				<uni-nav-bar ref="navBar" statusBar :border="false" backgroundColor="transparent" left-width="200px">
					<template v-slot:left>
						<view class="flex">
							<image src="@/static/image/login-logo.png" class="size-32 mr-4" style="border-radius: 50%;">
							</image>
							<view class="flex item-center">
								<text class=" text-bold" style="margin-right: 4px;">火动通告 </text> |
								<text style="font-size:8px;margin-left: 4px;">商户端</text>
							</view>
						</view>
					</template>
				</uni-nav-bar>
				<view class="join-title">入驻申请</view>
				<view class="step-box flex item-center justify-between">
					<template  v-for="(step,i) in stepObj" :key="i">
						<view  v-if="step.id!=1" class="dashed-border" :class="{acitve:current >= (step.id - 1)}"></view>
						<view class="flex flex-col justify-center item-center">
							<image src="@/static/svg/radio-checked.svg" mode="widthFix" class="radio-checked"
								v-if="current>=step.id"></image>
							<view class="unradio-checked" v-else></view>
							<view class="step-name" :class="{acitve:current>=step.id}">
								{{step.name}}
							</view>
						</view>
					</template>
					<!-- <view class="flex" v-for="(step,i) in stepObj" :key="i"> -->
						<!-- <view v-if="step.id!=1" class="dashed-border" :class="{acitve:current >= (step.id - 1)}"></view> -->
						
					<!-- </view> -->
				</view>
			</view>
			<baseInfo v-show="current == 1" @nextStep="nextStep" :detail="detail"></baseInfo>
			<settlementInfo v-show="current == 2" @preStep="preStep"  @nextStep="nextStep" :baseData="firstData" :detail="detail"></settlementInfo>
			<submitInfo v-show="current == 3" :code="code"  @preStep="preStep"  @nextStep="nextStep" :baseData="firstData" :settleData="secondData"></submitInfo>
			<!-- <view @click="topUp" style="height: 800px;">丰富的非</view> -->
		</template>
		<template v-else>
			<view class="page-bg"></view>
			<uni-nav-bar ref="navBar" statusBar :border="false" backgroundColor="transparent" left-width="200px">
				<template v-slot:left>
					<view class="flex">
						<image src="@/static/image/login-logo.png" class="size-32 mr-4" style="border-radius: 50%;">
						</image>
						<view class="flex item-center">
							<text class=" text-bold" style="margin-right: 4px;">火动通告 </text> |
							<text style="font-size:8px;margin-left: 4px;">商户端</text>
						</view>
					</view>
				</template>
			</uni-nav-bar>
			<successPage   v-if="current == 4" :baseData="firstData" :settleData="secondData"></successPage>
			<rebuildPage   v-if="current == 5" :baseData="firstData" :settleData="secondData"></rebuildPage>
		</template>
	</view>
	
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import baseInfo from './components/baseInfo.vue'
	import settlementInfo from './components/settlementInfo.vue'
	import submitInfo from './components/submitInfo.vue'
	import successPage from './components/successPage.vue'
	import rebuildPage from './components/rebuildPage.vue'
	import {getEnterInfo} from '@/api/businessEnterApply.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {mathHeight} from '@/utils/index.js'
	const scorllH = mathHeight(0)
	let code = ref(null)
	const stepObj = ref([{
		name: '填写经营资料',
		id: 1
	}, {
		name: '填写结算资料',
		id: 2
	}, {
		name: '确认提交',
		id: 3
	}])
	const current = ref(1)
	const detail = ref({})
	const scrollTop = ref(0)
	const firstData = ref({
		contactName:'',
		contactMobileNo:''
	})
	const linkCenter = () => {
		uni.redirectTo({
			url: '/homePages/pages/home/home?tab=4'
		});
	}
	const secondData = ref({})
	const topUp = () => {
		// scrollTop.value = 500
		// scrollTop.value = 0
		uni.pageScrollTo({
		    scrollTop: 0,
		    duration: 300
		  });
	}
	const scrollFn = (e) => {
		scrollTop.value = e.detail.scrollTop
	}
	const nextStep = (data) => {
		// console.log(data,'aaa')
		if(data.step ==2||data.step ==1){
			firstData.value = data.data
		}else if(data.step ==3) {
			secondData.value = data.data
		}
		topUp()
		current.value = data.step
	}
	const preStep = (num) => {
		topUp()
		current.value = current.value -1 - (num||0)
	}
	const getInfo = async () => {
		let result = await getEnterInfo({openid:uni.getStorageSync('openId')})
		if(result){
			detail.value = result
			if(result.settleCode){
				code.value = result.settleCode
			}
			
		}
	}
	onLoad((query) => {
		if (query.code) {
			code.value = query.code
		}
		if(query.result == 'rebuild'){
			getInfo()
		}
		// uni.setNavigationBarColor({
		//     frontColor: '#ffffff',
		//     backgroundColor: '#ffffff',
		//     animation: {
		//         duration: 400,
		//         timingFunc: 'easeIn'
		//     }
		// })
	})
	
</script>
<style>
	.cerVail .checklist-box{
		margin-right: 10px!important;
	}
</style>
<style lang="scss" scoped>
	.page {
		position: relative;
		width: 100vw;
		min-height: 100vh;
		background-color: #ffffff;
	}

	.page-bg {
		z-index: 0;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-image: radial-gradient(circle at left top, #D8230A26 50%, transparent 50%);
		background-size: 396px 396px;
		background-repeat: no-repeat;
		filter: blur(50px);
	}

	.container {
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.apply-top {
		background: linear-gradient(180deg, #FA4543 0%, #FA9796 100%);
		padding: 0 0 10px 0;
	}

	.join-title {
		font-size: 20px;
		font-weight: 600;
		line-height: 28px;
		text-align: center;
		color: #ffffff;
		// padding: 10px 0;
		padding-top: 20px;
	}

	.step-box {
		padding: 10px 20px;
		margin: 10px 20px;
		height: 66px;
		border-radius: 12px;
		background: rgba(255, 191, 191, 1);

		.radio-checked,
		.unradio-checked {
			width: 20px;
			height: 20px;
		}

		.unradio-checked {
			border-radius: 50%;
			background-color: #ffffff;
		}

		.dashed-border {
			width: 40px;
			margin-top: -20px;
			border-top: 2px dashed #ffffff;
			// margin-right: 10px;

			&.acitve {
				border-top: 2px dashed rgba(250, 69, 67, 1);
			}
		}

		.step-name {
			font-size: 12px;
			font-weight: 600;
			line-height: 17px;
			text-align: center;
			color: #ffffff;
			margin-top: 6px;

			&.acitve {
				color: rgba(250, 69, 67, 1);
			}
		}
	}
	.title-main{
		font-family: PingFang SC;
		font-size: 16px;
		font-weight: 600;
		line-height: 22px;
		letter-spacing: 0px;
		text-align: center;
		color: #ffffff;
	}
	.title-sec{
		font-family: PingFang SC;
		font-size: 16px;
		font-weight: 400;
		line-height: 22px;
		letter-spacing: 0px;
		text-align: left;
		color: #ffffff;
	}
</style>